<template>
  <view class="bd">
    <view class="t1">
      <view
        style="
          text-align: center;
          font-size: 40upx;
          font-weight: 900;
          padding-top: 50rpx;
        "
      >
        请问您是否是慢性病患者?
      </view>
      <view class="list">
        <view
          class="item"
          v-for="(v, index) in list"
          :class="{ active: chronic == v.id }"
          :key="index"
          @tap="choose(v)"
          >{{ v.name }}</view
        >
      </view>
      <view style="height: 50upx"></view>
      <view class="xy-itme flex flex-j-a" style="">
        <view style="font-size: 30upx; font-weight: 900">舒张压(低压)：</view>
        <input
          style="font-size: 30upx; border-bottom: 1px solid #eee; width: 200upx"
          type="text"
          placeholder="输入您的血压"
          v-model="user.bloodPressureDown"
          @input="checkNum($event, 1)"
        />
        <view style="font-size: 30upx">mmHg</view>
        <view style="font-size: 30upx; color: #fa3534">(可不填)</view>
      </view>
      <view class="xy-itme flex flex-j-a" style="">
        <view style="font-size: 30upx; font-weight: 900">收缩压(高压)：</view>
        <input
          style="font-size: 30upx; border-bottom: 1px solid #eee; width: 200upx"
          type="text"
          placeholder="输入您的血压"
          v-model="user.bloodPressureUp"
          @input="checkNum($event, 2)"
        />
        <view style="font-size: 30upx">mmHg</view>
        <view style="font-size: 30upx; color: #fa3534">(可不填)</view>
      </view>
      <view class="xy-itme flex flex-j-a" style="">
        <view style="font-size: 30upx; font-weight: 900">血糖（餐前）：</view>
        <input
          style="font-size: 30upx; border-bottom: 1px solid #eee; width: 200upx"
          type="text"
          placeholder="输入您的血糖"
          v-model="user.bloodFat"
          @input="checkNum($event, 3)"
        />
        <view style="font-size: 30upx">mmol/L</view>
        <view style="font-size: 30upx; color: #fa3534">(可不填)</view>
      </view>
      <view class="xy-itme flex flex-j-a" style="">
        <view style="font-size: 30upx; font-weight: 900">血糖（餐后）：</view>
        <input
          style="font-size: 30upx; border-bottom: 1px solid #eee; width: 200upx"
          type="text"
          placeholder="输入您的血糖"
          v-model="user.bloodFatCh"
          @input="checkNum($event, 4)"
        />
        <view style="font-size: 30upx">mmol/L</view>
        <view style="font-size: 30upx; color: #fa3534">(可不填)</view>
      </view>
      <view style="width: 80%; margin: 100upx auto 0">
        <button type="default" class="sbtn" @tap="nextStep">下一步</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          name: "是",
          id: "1",
        },
        {
          name: "否",
          id: "0",
        },
      ],
      user: {
        bloodPressureDown: "",
        bloodPressureUp: "",
        bloodFat: "",
        bloodFatCh: "",
      },
      chronic: "", // 是否有慢性病 0否 1是
    };
  },
  onLoad(options) {
    // //console.log(options)
    this.user = JSON.parse(options.user || "{}");
    //console.log(this.user)
  },
  onReady() {
    // this.getUiStyle();
  },
  methods: {
    getUiStyle() {
      var style = plus.navigator.getUiStyle();
      if ("dark" == style) {
        console.log("当前为暗黑模式");
        uni.setTabBarStyle({
          backgroundColor: "#1B1C1E",
        });
        uni.setNavigationBarColor({
          frontColor: "#ffffff",
          backgroundColor: "#1B1C1E",
          animation: {
            duration: 400,
            timingFunc: "easeIn",
          },
        });
      } else {
        console.log("当前为普通模式");
      }
    },
    choose(v) {
      this.chronic = v.id;
      this.user.chronic = v.id;
    },
    checkNum(e, type) {
      let val = e.target.value.replace(/(^\s*)|(\s*$)/g, "");
      if (!val) {
        if (type == 1) {
          this.user.bloodPressureDown = "";
        } else if (type == 2) {
          this.user.bloodPressureUp = "";
        } else if (type == 3) {
          this.user.bloodFat = "";
        } else if (type == 4) {
          this.user.bloodFatCh = "";
        }
        return;
      }
      var reg = /[^\d.]/g;
      // 只能是数字和小数点，不能是其他输入
      val = val.replace(reg, "");
      // // 保证第一位只能是数字，不能是点
      val = val.replace(/^\./g, "");
      // // 小数只能出现1位
      val = val.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
      // // 小数点后面保留2位
      val = val.replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3");
      this.$nextTick(() => {
        if (type == 1) {
          this.user.bloodPressureDown = val;
        } else if (type == 2) {
          this.user.bloodPressureUp = val;
        } else if (type == 3) {
          this.user.bloodFat = val;
        } else if (type == 4) {
          this.user.bloodFatCh = val;
        }
      });
    },
    shows() {
      uni.showToast({
        title: "请输入信息",
        icon: "none",
      });
      return false;
    },
    valid() {
      const reg = /(^[1-9](\d+)?(\.\d{1,2})?$)|(^0$)|(^\d\.\d{1,2}$)/;
      if (!reg.test(this.user.bloodPressureDown)) {
        uni.showToast({
          title: "请输入正确的舒张压，如有小数请保留至后两位小数",
          icon: "none",
        });
        return;
      }
      if (
        this.user.bloodPressureDown < 10 ||
        this.user.bloodPressureDown > 200
      ) {
        uni.showToast({
          title: "舒张压的范围在10-200之间",
          icon: "none",
        });
        return;
      }
      if (!reg.test(this.user.bloodPressureUp)) {
        uni.showToast({
          title: "请输入正确的收缩压，如有小数请保留至后两位小数",
          icon: "none",
        });
        return;
      }
      if (this.user.bloodPressureUp < 10 || this.user.bloodPressureUp > 200) {
        uni.showToast({
          title: "收缩压的范围在10-200之间",
          icon: "none",
        });
        return;
      }
      if (!reg.test(this.user.bloodFat)) {
        uni.showToast({
          title: "请输入正确的空腹血糖，如有小数请保留至后两位小数",
          icon: "none",
        });
        return;
      }
      if (this.user.bloodFat < 2 || this.user.bloodFat > 15) {
        uni.showToast({
          title: "空腹血糖的范围在2-15",
          icon: "none",
        });
        return;
      }
      if (!reg.test(this.user.bloodFatCh)) {
        uni.showToast({
          title: "请输入正确的餐后血糖，如有小数请保留至后两位小数",
          icon: "none",
        });
        return;
      }
      if (this.user.bloodFatCh < 2 || this.user.bloodFatCh > 20) {
        uni.showToast({
          title: "餐后血糖的范围在2-20",
          icon: "none",
        });
        return;
      }
      return true;
    },
    nextStep() {
      if (
        !this.user.bloodPressureDown &&
        !this.user.bloodPressureUp &&
        !this.user.bloodFat &&
        !this.user.bloodFatCh
      ) {
        uni.navigateTo({
          url: "/pages/reg/answer?user=" + JSON.stringify(this.user),
        });
      } else {
        if (!this.valid()) return;
        uni.navigateTo({
          url: "/pages/reg/answer?user=" + JSON.stringify(this.user),
        });
      }
    },
  },
  mounted() {
    this.chronic = this.list[1].id;
    this.user.chronic = this.list[1].id;
  },
};
</script>

<style lang="less" scoped>
.list {
  width: 80%;
  margin: 0 auto;

  .item {
    border-radius: 50upx;
    text-align: center;
    line-height: 100upx;
    color: #999;
    font-size: 30upx;
    background-color: #eee;
    margin-top: 60upx;
  }

  .item.active {
    background-color: #ff9900;
    color: #fff;
  }
}

.xy-itme {
  margin: 0 auto;
  padding: 10upx 0;
  margin-top: 50upx;
}

.sbtn {
  background: #18c7e1;
  color: #fff;
}
</style>
<style scoped>
@media (prefers-color-scheme: closedark) {
  .bd {
    background-color: #1b1c1e !important;
    height: calc(100vh - var(--window-top));
  }
  .bd1 {
    background-color: #38383c !important;
  }
  .t1 {
    color: #ccc !important;
  }
  >>> input {
    color: #ccc !important;
  }
}
</style>